import styles from './index.less'
import React from "react";
import {IconChevronLeft} from '@douyinfe/semi-icons';
import {history} from 'umi'
import {Typography} from "@douyinfe/semi-ui";
import videoItemAPI from '@/api/model/video-item';
import videoAPI from '@/api/model/video';
import ReactPlayer from 'react-player'
import Loading from '@/components/loading';

class PrvideoDetail extends React.Component<any, any> {
    private player: any;

    constructor(props: any) {
        super(props);
        this.state = {
            // @ts-ignore
            loading: true,
            historyList: [],
            history: {},
            videoId: 0,
            videoItemList: [],
            videoDetail: {},
            videoItem: {},
            player: null
        }
        this.getVideoItemList = this.getVideoItemList.bind(this)
        this.ref = this.ref.bind(this)
        this.onReady = this.onReady.bind(this)
        this.goTo = this.goTo.bind(this)
        this.onPause = this.onPause.bind(this)
        this.onProgress = this.onProgress.bind(this)
        this.onStart = this.onStart.bind(this)
        this.goLookVideoItem = this.goLookVideoItem.bind(this)
    }

    componentDidMount() {
        const videoId = window.sessionStorage.getItem('videoId')
        this.getVideoItemList(videoId)
        // 重置滚动条
        window.scrollTo(0, 0);
    }

    async getVideoItemList(id: any) {
        const res = await videoItemAPI.videoItemList({id});
        const videoDetail = await videoAPI.getVideoDetail({id})
        const getHistoryOne = await videoItemAPI.getHistoryOne({videoId: id})
        // const {Text} = Typography;
        // let opts = {
        //     title: '提示',
        //     duration: 0,
        //     content: (
        //         <>
        //             <div>{videoDetail.data.videoName}  是否跳转播放历史</div>
        //             <div style={{marginTop: 8}}>
        //                 <Text link onClick={this.goTo}>跳转</Text>
        //             </div>
        //         </>
        //     ),
        // };
        // if (getHistoryOne.data.length > 0) {
        //     Notification.info(opts)
        // }
        let videoItem = {}
        if(getHistoryOne.data.length > 0) {
            res.data.forEach((t: any) => {
                if (t.id == getHistoryOne.data[0].videoItemId) {
                    videoItem = t
                }
            })
        }else {
            videoItem = res.data[0]
        }

        this.setState({
            historyList: getHistoryOne.data,
            history: getHistoryOne.data[0],
            videoId: id,
            videoItemList: res.data,
            videoDetail: videoDetail.data,
            videoItem,
            loading: false,
        });
    }

    goBack = () => {
        history.go(-1)
    }

    onPause(e: any) {
        const {player}: any = this.state
        const historyRecord = player.getCurrentTime()
        this.saveHistory(historyRecord)

    }

    saveHistory(historyRecord: any) {
        const {videoDetail, videoId, videoItem}: any = this.state
        videoItemAPI.addHistory({
            videoId,
            videoItemId: videoItem.id,
            historyRecord
        })
    }

    onDuration(e: any) {
    }

    onPlay(e: any) {
    }

    onProgress(e: any) {
        this.saveHistory(e.playedSeconds)
    }

    ref = (player: any) => {
        this.setState({
            player
        })
    }

    onReady(e: any) {
        // this.state.player.seekTo(1015.206868,'seconds')  // 改变视频进度
    }

    onStart() {
        setTimeout(() => {
            this.goTo()
        })
    }

    goTo() {
        const {history, player}: any = this.state
        if (player && history) {
            player.seekTo(history.historyRecord * 1, 'seconds')  // 改变视频进度
        }

    }

    async goLookVideoItem(t: any) {
        let newHistory = {}
        const {videoDetail}: any = this.state
        const getHistoryOne: any = await videoItemAPI.getHistoryOne({videoId: videoDetail.id})
        getHistoryOne.data.forEach((c: any) => {
            if (t.id == c.videoItemId) {
                newHistory = c
            }
        })
        this.setState({
            videoItem: t,
            history: newHistory ? newHistory : {}
        })
    }

    render() {
        const {videoItemList, videoDetail, videoItem, loading}: any = this.state
        const {Paragraph} = Typography;
        return (
            <>
                {
                    loading ? <Loading/> :
                        <div className={['container', styles.prvideo_detail_container].join(' ')}>
                            {/*<div className={styles.go_back_icon_box} onClick={this.goBack}>*/}
                            {/*    <IconChevronLeft className={styles.go_back_icon}/>*/}
                            {/*</div>*/}
                            <div className={styles.video_container}>
                                <ReactPlayer
                                    ref={this.ref}
                                    playing={true}
                                    className='react-player'
                                    url={videoItem.videoUrl}
                                    width='100%'
                                    height='100%'
                                    controls
                                    onReady={this.onReady}
                                    progressInterval={4000}
                                    // @ts-ignore
                                    onPause={this.onPause}
                                    onDuration={this.onDuration}
                                    onProgress={this.onProgress}
                                    onStart={this.onStart}
                                />
                            </div>
                            <div className={styles.video_info}>
                                <div className={styles.title}>
                                    {videoDetail.videoName}
                                    {
                                        videoDetail.bluesNumber == 1 || videoDetail.bluesNumber == 0 ? '' :
                                            <span>
                                                {'第' + (videoItem.videoNumber * 1 >= 10 ? videoItem.videoNumber : '0' + videoItem.videoNumber) + '集'}
                                            </span>
                                    }
                                    {
                                        videoDetail.bluesNumber == 1 || videoDetail.bluesNumber == 0 ? '' :
                                            <span className={styles.title_tip}>共 {videoDetail.bluesNumber} 集</span>
                                    }

                                </div>

                                <div className={styles.describe}>
                                    {
                                        videoDetail.describe ?
                                            <Paragraph ellipsis={{
                                                rows: 1,
                                                expandable: true,
                                                collapsible: true,
                                                collapseText: '折叠我吧',
                                            }} style={{width: '100%'}}>
                                                {videoDetail.describe}
                                            </Paragraph>
                                            : ''
                                    }
                                </div>
                                {
                                    videoDetail.bluesNumber == 1 || videoDetail.bluesNumber == 0 ? '' :
                                        <div className={styles.drama_container}>
                                            {
                                                videoItemList.map((d: any) => {
                                                    return (
                                                        <div key={d.id}
                                                             className={[styles.drama_item, videoItem.videoNumber == d.videoNumber ? styles.activity_item : ''].join(' ')}
                                                             onClick={() => this.goLookVideoItem(d)}>
                                                            {'第' + (d.videoNumber * 1 >= 10 ? d.videoNumber : '0' + d.videoNumber) + '集'}
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                }
                            </div>
                        </div>
                }
            </>
        )
    }
}

export default PrvideoDetail
